<template>
  <div class="panel-6 card-common-cls" :class="{'mask-cls': maskable}" @click="click2Drag">
    <div class="panel-6-box">
      <div class="panel-6-tips">
        <p>
          <el-checkbox v-if="item.tips.has_check_box == 1" :model-value="checked"></el-checkbox>
          <span>{{item.tips.tips_text}}</span>
        </p>
      </div>

      <div class="panel-6-button">
        <span>{{item.button.name || '占位符'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      item: Object,
      maskable: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      checked() {
        return this.item.tips.checked_default == 1;
      },
    },
    methods: {
      click2Drag() {
        // console.log(e);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .mask-cls::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  .panel-6-box {
    width: 100%;

    .panel-6-tips {
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        span {
          font-size: 12px;
          color: #a0a0a0;
          margin-left: 8px;
        }
      }
    }

    .panel-6-button {
      padding: 10px 0;
      background: orange;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        border: 1px solid #fff;
        border-radius: 100px;
        padding: 2px 30px;
        font-size: 16px;
        color: #fff;
      }
    }
  }
  .card-common-cls {
    position: relative;
    width: 100%;
    max-width: 375px;
    z-index: 0;
  }
</style>
